<template>
  <div class="password-layout" @click="onHidePopover">
    <div class="input-box flex">
      <div class="icon">
        <img src="@/assets/icons/mobile-phone.png" />
      </div>

      <div class="mdn">
        <popover ref="popover">
          <div class="mdn-action">
            +{{ mdn }}
            <van-icon name="arrow-down" class="arrow-down-icon" />
          </div>
          <template v-slot:content>
            <div class="mdn-content">
              <div
                v-for="item in mdns"
                :key="item"
                :class="['mdn-item', item === mdn && 'active']"
                @click="onSelectMdn(item)"
              >+{{ item }}</div>
            </div>
          </template>
        </popover>

        <span class="divider">|</span>
      </div>
      <input v-model="phone" placeholder="手机号" />
    </div>

    <div class="input-box flex">
      <div class="icon">
        <img src="@/assets/icons/lock.png" />
      </div>
      <input v-model="password" type="password" placeholder="密码" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Icon } from 'vant'
import Popover from '@/components/Popover'
import { mdns } from '@/constants/common'
import { messages, toast } from '@/utils/messages'

Vue.use(Icon)

export default {
  components: {
    Popover
  },

  data() {
    return {
      mdn: '86',
      phone: '',
      password: '',
      mdns
    }
  },

  methods: {
    onSelectMdn(mdn) {
      this.mdn = mdn
    },

    onHidePopover() {
      this.$refs.popover.visible = false
    },

    validate() {
      const { phone, password } = this

      return new Promise((resolve, reject) => {
        if (!phone) {
          toast(messages.REQUIRED_INPUT('手机号/用户名/邮箱'))
          reject()
        } else if (!password) {
          toast(messages.REQUIRED_INPUT('密码'))
          reject()
        } else {
          resolve({ phone, password })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.password-layout {
  .input-box {
    align-items: center;
    margin: 24px 0;

    .icon {
      width: 18px;
      margin-right: 20px;
      display: flex;
      align-items: center;

      img {
        width: 18px;
      }
    }

    .mdn {
      display: flex;
      align-items: center;
      color: #cfd4de;

      .mdn-action {
        width: 53px;
      }

      .arrow-down-icon {
        margin-left: 6.5px;
        font-size: 10px;
      }

      .mdn-content {
        width: 86.5px;
        height: 190px;
        overflow-y: auto;
        padding: 8px 0;
      }

      .mdn-item {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 8px 0;
        margin: 0 8px;
        border-bottom: 0.5px solid rgba(207, 212, 222, 0.3);
      }

      .active {
        color: #222222;
      }
    }

    input {
      flex: 1;
      border: none;
      background-color: rgba(0, 0, 0, 0);

      &::placeholder {
        color: #cfd4de;
        font-weight: 500;
      }
    }

    .divider {
      color: #cfd4de;
      margin: 0 8px;
    }

    .captcha {
      color: #cfd4de;
      font-size: 12px;
      flex: 0 0 68px;
      width: 68px;
      font-weight: 500;
    }
  }
}
</style>
